<!-- 活动分享配置模块 -->
<template>
  <a-form
    ref="formRef"
    class="form"
    layout="horizontal"
    labelAlign="left"
    :hideRequiredMark="false"
    :colon="false"
    :labelCol="{ span: 24 }"
    :wrapperCol="{ span: 24 }"
    :model="model"
    :rules="props.isDetail ? [] : formRules"
  >
    <a-form-item label="同一商户可参与次数限制" name="isOnlyOneTimes">
      <a-radio-group v-model:value="model['isOnlyOneTimes']" :disabled="props.isDetail">
        <a-radio :value="0">不限制</a-radio>
        <a-radio :value="1">限制</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="model['isOnlyOneTimes'] !== 0" label="同一商户可参与次数" name="onlyOneTimes" :wrapper-col="{ span: 12 }">
      <a-input-number v-model:value="model['onlyOneTimes']" :disabled="props.isDetail" placeholder="请输入同一商户可参与次数" :min="0" :precision="0" />
    </a-form-item>

    <a-form-item label="交易笔数同抽奖次数的兑换比例" name="exchangeRateBills" :rules="[{ required: true, validator: exchangeRateBillsValidator }]">
      <div style="display: flex;align-items: center;gap: 10px;">
        <a-input-number
          v-model:value="model['exchangeRateBills']"
          :disabled="props.isDetail"
          :min="0"
          :precision="0"
          :controls="false"
          style="width: 50px;"
        />
        笔交易每
        <a-select v-model:value="model['exchangePeriodType']" :disabled="props.isDetail" style="width: 80px;">
          <a-select-option :value="1">日</a-select-option>
          <a-select-option :value="2">周</a-select-option>
          <a-select-option :value="3">月</a-select-option>
          <a-select-option :value="4">年</a-select-option>
        </a-select>
        可以兑换抽奖机会
        <a-input-number
          v-model:value="model['exchangeRateTimes']"
          :disabled="props.isDetail"
          :min="0"
          :precision="0"
          :controls="false"
          style="width: 50px;"
        />
        次,
        最多
        <a-input-number
          v-model:value="model['exchangePeriodTimes']"
          :disabled="props.isDetail"
          :min="0"
          :precision="0"
          :controls="false"
          style="width: 50px;"
        />
        次
      </div>
    </a-form-item>
    <a-form-item label="商户星级是否影响抽奖次数" name="isMchLevelJson">
      <a-radio-group v-model:value="model['isMchLevelJson']" :disabled="props.isDetail">
        <a-radio :value="0">不影响</a-radio>
        <a-radio :value="1">影响</a-radio>
      </a-radio-group>
      <a-table v-show="model.isMchLevelJson === 1" :dataSource="dataSource" :columns="tableColums" :pagination="false" size="small" />
    </a-form-item>
    <a-form-item label="未使用抽奖机会最多留存" name="isRemainTimes">
      <a-radio-group v-model:value="model['isRemainTimes']" :disabled="props.isDetail">
        <a-radio :value="0">不限制</a-radio>
        <a-radio :value="1">限制</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="model['isRemainTimes'] === 1" label="最多留存抽奖次数" name="remainTimes" :wrapper-col="{ span: 12 }">
      <a-input-number v-model:value="model['remainTimes']" :disabled="props.isDetail" placeholder="请输入最多留存抽奖次数" :min="0" :precision="0" />
    </a-form-item>
    <a-form-item label="抽奖次数统计开始时间" name="isStatisticTimeStart">
      <a-radio-group v-model:value="model['isStatisticTimeStart']" :disabled="props.isDetail">
        <a-radio :value="0">同活动开始时间</a-radio>
        <a-radio :value="1">不同于活动开始时间</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="model['isStatisticTimeStart'] === 1" label="统计开始时间" name="statisticTimeStart" :wrapper-col="{ span: 12 }">
      <a-date-picker v-model:value="model['statisticTimeStart']" :disabled="props.isDetail" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" style="width: 100%;" />
    </a-form-item>
  </a-form>
</template>

<script setup>
import { defineProps, defineEmits, computed, reactive, ref, defineExpose, onMounted, nextTick } from 'vue'
import { useVModel } from '@/utils/useVModel.js'
import dayjs from 'dayjs'


const emits = defineEmits(['update:modelValue'])

const props = defineProps({
  // 表单绑定值
  modelValue: {
    type: Object,
    default: () => ({
      isOnlyOneTimes: 0,  // 同一商户可参与次数限制
      isMchLevelJson: 0,  // 商户星级影响抽奖次数
      isRemainTimes: 0,  // 商户剩余次数限制
      isStatisticTimeStart: 0,  // 统计时间开始限制
    })
  },
  // 是否是详情
  isDetail: {
    type: Boolean,
    default: false
  },
  // 表单校验规则 使用当前组件时可以根据具体情况自定义 默认全部必填
  rules: {
    type: Object,
    default: () => ({})
  }
})

// 表单规则（总） 默认所有字段必填 根据具体活动 某些字段可以不填 需要在组件挂载时合并传递过来的规则
const formRules = ref({
  isOnlyOneTimes: [{ required: true }],
  onlyOneTimes: [{ required: true, message: '请输入同一商户可参与次数', trigger: 'blur' }],
  isMchLevelJson: [{ required: true }],
  isRemainTimes: [{ required: true }],
  remainTimes: [{ required: true, message: '请输入最多留存抽奖次数', trigger: 'blur' }],
  isStatisticTimeStart: [{ required: true }],
  statisticTimeStart: [{ required: true, type: 'date', message: '请选择统计开始时间', trigger: 'blur' }],
})

// exchangeRateBills 交易笔数同抽奖次数的兑换比例 表单校验规则
const exchangeRateBillsValidator = () => {
  const { exchangeRateBills, exchangeRateTimes, exchangePeriodTimes, exchangePeriodType } = props.modelValue
  if(!exchangeRateBills || !exchangeRateTimes || !exchangePeriodTimes || !exchangePeriodType){
    return Promise.reject('请完善兑换比例信息')
  }
  return Promise.resolve()
}

const model = useVModel(props, 'modelValue', emits)

// 表单实例
const formRef = ref()

// 传递表单默认值
onMounted(() => {
  emits('update:modelValue', props.modelValue)
  // 合并规则 以传递规则为准 主要用于部分活动并非所有字段都需要校验
  Object.assign(formRules.value, props.rules)
})

// 商户星级表格
const tableColums = [
  { title:'商户星级', dataIndex: 'level', key: 'level' },
  { title:'每（设定的笔数）额外增加抽奖次数（可正可负，但是不能为0）', dataIndex: 'draw', key: 'draw' },
]
// 商户星级数据
const dataSource = [
  { key: '1', level: '新增商户', draw: 0 },
  { key: '2', level: '0', draw: 1 },
  { key: '3', level: '1', draw: 1 },
  { key: '4', level: '2', draw: 2 },
  { key: '5', level: '3', draw: 3 },
  { key: '6', level: '4', draw: 4 },
  { key: '7', level: '5', draw: 5 },
]

// 表单校验事件
async function validateFields(fields) {
  return new Promise((resolve, reject) => {
    formRef.value.validateFields(fields).then(() => {
      resolve()
    }).catch(err => {
      reject(err)
    })
  })
}
// 表单重置事件
function clearValidate() {
  if (formRef.value !== undefined) {
    formRef.value.clearValidate()
  }
}

// 暴露表单校验事件
defineExpose({
  validateFields,
  clearValidate
})

</script>

<style lang="less" scoped>
.form{
  width: 80%;
  margin-left: 20px;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar{
    display: none;
  }
}
:deep(.ant-input-number) {
  width: 100%;
}
:deep(.ant-table-wrapper){
  margin: 0;
  margin-top: 10px;
}

</style>